@import url("sanitize.css");

:root {
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	// 全局变量
	--color-primary: #165dff;
	--color-background: #e8efff;
	--color-border: #e6e6e6;
	--color-text: #303133;
	// 全局高度
	--h-full: calc(100dvh - 52px);
	--h-page: calc(100dvh - 72px);
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

#app {
	box-sizing: border-box;
	width: 100dvw;
	height: 100dvh;
	// 全局样式
	.app-center {
		height: var(--h-full);
		.app-page {
			height: var(--h-page);
			overflow: hidden;
			box-shadow: 0 0 1px rgba(0, 0, 0, 0.75);
			border-radius: 5px;
			// 组件滚动
			&.page-scroll {
				overflow: auto;
			}
			// 全屏滚动
			&.full-scroll {
				height: auto;
			}
			&.page-center {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.app-card {
			height: var(--h-page);
			overflow: hidden;
			&:has(.el-card__header) {
				display: grid;
				grid-template-rows: auto 1fr;
				.el-card__body {
					height: 100%;
					overflow: hidden;
					overflow-y: auto;
				}
			}
			&:not(.el-card__header) {
				.el-card__body {
					height: 100%;
					overflow: hidden;
					overflow-y: auto;
				}
			}
		}
	}
}

#nprogress {
	pointer-events: none;
	.bar {
		background-color: var(--color-primary);
	}
	.peg {
		box-shadow: 0 0 10px var(--color-primary);
	}
}

/* 滚动条 */
* {
	scrollbar-width: thin;
	scrollbar-color: #ddd transparent;
	-webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar {
	width: 4px;
	height: 5px;
}
::-webkit-scrollbar {
	width: 4px;
	height: 5px;
}
::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-track:hover {
	border-radius: 5px;
}

.h-full {
	height: 100%;
}

.w-full {
	width: 100%;
}
